/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/**
 * 小程序推广
 *  */
import React, { useEffect, useCallback } from "react";
import { Row, Col, Button, Form, Typography, Checkbox, message, Divider } from "antd";
import { connect, useDispatch, useSelector } from "dva";
import ServiceQrcode from "../components/ServiceQrcode";
import styles from "../style.less";

const { Title, Text } = Typography;
const FormItem = Form.Item;

const checkBoxMap = [
  {
    label:
      "驿站门店专属码、驿站预约快取码、闸机码、业务员揽件码名片、取件码打印显示二维码，由公众号二维码更换为小程序二维码",
    value: "qrcode_status",
  },
];

const selectWxMiniApp = ({ platform: { platformList: { weixin_mini = {} } = {} } = {} }) =>
  weixin_mini.platform;
const selectOfficialAccount = ({ platform: { platformList: { weixin = {} } = {} } = {} }) =>
  weixin.platform;

const errorMap = {
  wxMiniApp: {
    title: "您暂未定制小程序，可联系我方客服定制",
    content: (
      <Typography>
        <Title level={4}>定制小程序优势：</Title>
        <Text type="secondary">1.短信引流：支持客户点击取件短信中链接直接跳转小程序</Text>
        <br />
        <Text type="secondary">2.预约取件：支持驿站预约快取功能，扫码直接绑定手机号，1客1码</Text>
        <br />
        <Text type="secondary">3.智能设备：支持驿站智能出库仪、闸机、驿站叫号屏、智能寄件柜</Text>
        <br />
        <Text type="secondary">4.数据互通：定制公众号与定制小程序，可数据互通，双平台留存客户</Text>
        <br />
        <Text type="secondary">
          5.取件通知：客户访问小程序可订阅取件消息，取件通知可通过微信服务通知给客户，节省短信费
        </Text>
      </Typography>
    ),
  },
  officialAccount: {
    title: "您暂未定制公众号，可联系我方客服定制",
    content: (
      <Typography>
        <Title level={4}>定制公众号优势：</Title>
        <Text type="secondary">1.粉丝变现：寄件/查件/取件支持客户扫码关注，积累粉丝，利于变现</Text>
        <br />
        <Text type="secondary">2.预约取件：支持驿站预约快取功能，扫码直接绑定手机号</Text>
        <br />
        <Text type="secondary">
          3.模板消息：针对客户物流服务全链路通知：己发货/派送中/待取件/己签收等模板消息，提高客户黏性及留存
        </Text>
        <br />
        <Text type="secondary">4.数据互通：定制公众号与定制小程序，可数据互通，双平台留存客户</Text>
        <br />
        <Text type="secondary">
          5.取件通知：客户关注公众号并绑定手机号，取件通知可通过微信服务通知给客户，节省短信费
        </Text>
      </Typography>
    ),
  },
};

const MiniappPromotion = ({ form, loading, goBack }) => {
  const { getFieldDecorator, validateFields, isFieldsTouched, setFieldsValue } = form;

  const dispatch = useDispatch();
  const wxMiniApp = useSelector(selectWxMiniApp);
  const officialAccount = useSelector(selectOfficialAccount);

  const getConfig = useCallback(
    () => {
      dispatch({
        type: "wxSettings/getPromoteMiniProgram",
      }).then(res => {
        setFieldsValue({
          checkBox: res,
        });
      });
    },
    [dispatch, setFieldsValue]
  );

  const onSubmit = useCallback(
    () => {
      const isTouched = isFieldsTouched();
      if (!isTouched) {
        message.warning("请修改后再提交");
        return;
      }
      validateFields((err, val) => {
        if (err) return;
        const { checkBox = [] } = val;
        const payload = {
          config_type: "qrcode_status",
        };
        checkBoxMap.forEach(({ value }) => {
          if (checkBox.includes(value)) {
            payload.config_status = 2;
          } else {
            payload.config_status = 1;
          }
        });

        dispatch({
          type: "wxSettings/editPromoteMiniProgram",
          payload,
        }).then(() => {
          getConfig();
        });
      });
    },
    [dispatch, getConfig, isFieldsTouched, validateFields]
  );

  useEffect(
    () => {
      getConfig();
    },
    [getConfig]
  );

  return (
    <div>
      <Row style={{ width: "100%" }}>
        <Col span={24}>
          <Typography>
            <Title level={3}>
              {!!wxMiniApp && !!officialAccount
                ? "勾选后相关功能将会以小程序承载"
                : !!wxMiniApp
                  ? errorMap.officialAccount.title
                  : errorMap.wxMiniApp.title}
            </Title>
            <Divider />
          </Typography>
          {!!wxMiniApp && !!officialAccount ? (
            <Row type="flex" justify="center">
              <Col>
                <Form>
                  <FormItem>
                    <Title level={4}>请选择：</Title>
                  </FormItem>
                  <FormItem>
                    {getFieldDecorator("checkBox")(
                      <Checkbox.Group style={{ width: "100%" }}>
                        <Row gutter={[30, 30]}>
                          {checkBoxMap.map(val => (
                            <Col key={val.value}>
                              <Checkbox value={val.value}>{val.label}</Checkbox>
                            </Col>
                          ))}
                        </Row>
                      </Checkbox.Group>
                    )}
                  </FormItem>
                  <FormItem>
                    <Text type="secondary">
                      注1：公众号寄件成功通知、打印成功通知、快递取件通知、快递取出提醒、其模板消息跳转公众号页面更换为跳转小程序
                    </Text>
                    <br />
                    <Text type="secondary">
                      注2：扫公众号驿站门店专属码、驿站预约快取码、业务员揽件码，其文本消息回复链接（寄件、取件、绑定手机号）为小程序
                    </Text>
                  </FormItem>
                </Form>
              </Col>
            </Row>
          ) : (
            <ServiceQrcode
              info={
                <div>
                  {!!wxMiniApp ? errorMap.officialAccount.content : errorMap.wxMiniApp.content}
                </div>
              }
            />
          )}
        </Col>
      </Row>
      <Row type="flex" justify="end" className={styles.customizedMenu__bottom}>
        <Col style={{ marginTop: 10 }}>
          <Row type="flex" justify="space-between" gutter={[20, 0]}>
            {!!wxMiniApp &&
              !!officialAccount && (
                <Col>
                  <Button onClick={onSubmit} type="primary" loading={loading}>
                    确认
                  </Button>
                </Col>
              )}
            <Col>
              <Button type="primary" onClick={goBack}>
                返回
              </Button>
            </Col>
          </Row>
        </Col>
      </Row>
    </div>
  );
};

export default Form.create()(
  connect(({ loading }) => ({ loading: loading.effects["wxSettings/editPromoteMiniProgram"] }))(
    MiniappPromotion
  )
);
